<template>
    <div class="rechargeRecord">
        <el-card>

            <el-card>
                交易状态：
                <el-select size="small" style="width: 100px;" v-model="billStatus" placeholder="请选择">
                    <el-option v-for="item in stausoptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                手机号：
                <el-input v-model="smobile" size="small" placeholder="输入查询码号" style="width: 180px;" clearable></el-input>

                开始日期：
                <el-date-picker size="small" style="width: 180px;" v-model="startTime" type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期">
                </el-date-picker>
                结束日期：
                <el-date-picker size="small" style="width: 180px;" v-model="endTime" type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" :picker-options="pickerOptions">
                </el-date-picker>

                &ensp;
                &ensp;
                &ensp;

                <el-button size="small" type="primary" @click="queryDetails()">查询</el-button>
                <el-button type='primary' @click="exportExcel('apiIndex')" size="small" plain>导出</el-button>

            </el-card>
            <!-- 表格内容 -->
            <el-table id="apiIndex" :data="tableData" border style="width: 100%">
                <el-table-column align="center" type="index" width="50">
                </el-table-column>
                <el-table-column align="center" width="160" prop="time" label="交易时间">
                </el-table-column>

                <el-table-column align="center" width="80" prop="billStatus" label="交易状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type == 'REJECTED'" style="color: green;">余额收入</span>
                        <span v-if="scope.row.type == 'DELIVRD'" style="color: red;"> 余额支出</span>
                    </template>
                </el-table-column>

                <el-table-column label="交易金额" width="100" align="center">
                    <template slot-scope="scope">
                        <span style="color: green;" v-if="scope.row.type == 'REJECTED'">+{{
                            scope.row.money | currency("￥")
                        }}</span>
                        <span style="color: red;" v-if="scope.row.type == 'DELIVRD'">-{{
                            scope.row.money | currency("￥")
                        }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="交易前/交易后余额" width="200" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.beginBalance">{{ scope.row.beginBalance }}元/{{ scope.row.balance }}元</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" width="160" prop="taskId" label="交易单号">
                </el-table-column>
                <el-table-column align="center" width="160" prop="orderId" label="客户单号">
                </el-table-column>
                <el-table-column label="交易明细" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type == 'REJECTED'">[订单退款]充值码号：{{
                            scope.row.mobile
                        }},

                            {{
                                scope.row.area
                            }},
                            <span v-if="scope.row.operator == '01'">联通</span>
                            <span v-if="scope.row.operator == '02'">移动</span>
                            <span v-if="scope.row.operator == '03'">电信</span>
                            <span v-if="scope.row.operator == null">三网</span>

                            <br>
                            充值产品:{{ scope.row.productName }}/产品ID：{{ scope.row.productId }}-退款</span>
                        <span v-if="scope.row.type == 'DELIVRD'">[订单支付]充值码号：{{
                            scope.row.mobile
                        }},

                            {{
                                scope.row.area
                            }},
                            <span v-if="scope.row.operator == '01'">联通</span>
                            <span v-if="scope.row.operator == '02'">移动</span>
                            <span v-if="scope.row.operator == '03'">电信</span>
                            <span v-if="scope.row.operator == null">三网</span>
                            <br>
                            充值产品:{{ scope.row.productName }}/产品ID：{{ scope.row.productId }}</span>
                    </template>
                </el-table-column>

            </el-table>
            <!-- 分页 -->
            <!-- currentPage -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="this.pageCode" :page-sizes="[10, 100, 1000, 10000]" :page-size="this.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="this.totalCount">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import { balanceDetailed } from "@/api/order";
import { getUsername } from "@/api/sys";
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
// 引入防抖函数
import debounce from "lodash.debounce";
export default {
    data() {
        return {
            // 搜索手机号
            smobile: "",
            startTime: "",
            endTime: "",
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() - 86400000 > Date.now();
                },
            },
            tableData: [],
            totalCount: 1,
            pageSize: 10,
            pageCode: 1,
            username: "",
            // 状态
            billStatus: "",
            // 下拉框
            stausoptions: [
                {
                    value: "",
                    label: "全部",
                },
                {
                    value: "1",
                    label: "支出",
                },
                {
                    value: "2",
                    label: "收入",
                },
            ],
            // 下拉框
            options: [],
        };
    },
    async created() {
        // 获取用户名
        // let res = await getUsername();
        // if (res.status == 0) {
        // this.options = res.data;
        // }
        let a = this.$store.state.user.role
        console.log(a);
        if (this.$store.state.user.role == "admin") {
            // 获取表格数据
            let data = {
                "username": localStorage.getItem("username"),

                "type": "",
                "pageNum": "",
                "pageSize": ""
            }
            // {
            //     username: "",
            //     type: "",
            //     startTime: "",
            //     endTime: "",
            //     mobile: "",
            //     pageNum: "",
            //     pageSize: "",
            // }
            let res1 = await balanceDetailed(data);
            this.tableData = res1.data;
            this.totalCount = res1.totalCount;

        } else {
            this.username = localStorage.getItem("username");

            let data = {
                "username": this.username,
                "mobile": this.smobile,
                "startTime": this.startTime,
                "endTime": this.endTime,
                "type": "",
                "pageNum": "",
                "pageSize": ""
            };
            let res1 = await balanceDetailed(data);
            this.tableData = res1.data;
            this.totalCount = res1.totalCount;

        }
    },
    methods: {
        exportExcel() {
            //导出当前表格
            var wb = XLSX.utils.table_to_book(document.querySelector("#apiIndex")); //表格id
            var wbout = XLSX.write(wb, {
                bookType: "xlsx",
                bookSST: true,
                type: "array",
            });
            try {
                FileSaver.saveAs(
                    new Blob([wbout], { type: "application/octet-stream" }),
                    "余额统计表.xlsx"
                ); //文件名
            } catch (e) {
                if (typeof console !== "undefined") console.log(e, wbout);
            }
            return wbout;
        },
        // 查询明细
        queryDetails: debounce(async function () {
            let data = {
                "username": localStorage.getItem("username"),
                "mobile": this.smobile,
                "startTime": this.startTime,
                "endTime": this.endTime,
                "type": this.billStatus,
                "pageSize": this.pageSize,
                "pageNum": this.pageCode,
            };
            let res = await balanceDetailed(data);
            this.tableData = res.data;
            this.totalCount = res.totalCount;

            console.log(res);
        }, 500),
        //表格分页
        async handleSizeChange(val) {
            ////console.log(`每页 ${val} 条`);
            this.pageSize = val;
            let data = {
                "username": localStorage.getItem("username"),
                "mobile": this.smobile,
                "startTime": this.startTime,
                "endTime": this.endTime,
                "type": this.billStatus,
                "pageSize": this.pageSize,
                "pageNum": this.pageCode,
            };
            let res = await balanceDetailed(data);
            this.tableData = res.data;
            this.totalCount = res.totalCount;
        },
        async handleCurrentChange(val) {
            ////console.log(`当前页: ${val}`);
            ////console.log(this.nameinput);
            this.pageCode = val;
            let data = {
                "username": localStorage.getItem("username"),
                "type": this.billStatus,
                "mobile": this.smobile,
                "startTime": this.startTime,
                "endTime": this.endTime,
                "pageSize": this.pageSize,
                "pageNum": this.pageCode,
            };
            let res = await balanceDetailed(data);
            this.tableData = res.data;
            this.totalCount = res.totalCount;
        },
    },
};
</script>

